---
title: Customization
metaTitle: Customization
description: Override and customize your Authenticator.
supportedFrameworks: android|angular|flutter|react|react-native|swift|vue|svelte
---

import { InlineFilter } from '@/components/InlineFilter';
import { FRAMEWORKS } from '@/data/frameworks';
import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
import CustomizationFlutter from './customization.routing.flutter.mdx';
import CustomizationAndroid from './customization.headers-and-footers.android.mdx';
import CustomizationReactNative from './customization.headers-and-footers.react-native.mdx';
import CustomizationSwift from './customization.headers-and-footers.swift.mdx';
import CustomizationWeb from './customization.headers-and-footers.web.mdx';
import CustomizationOverrideReactNative from './customization.override-function-calls.react-native.mdx';
import CustomizationOverrideWeb from './customization.override-function-calls.web.mdx';
import I18Android from './customization.i18n.android.mdx';
import I18Flutter from './customization.i18n.flutter.mdx';
import I18ReactNative from './customization.i18n.react-native.mdx';
import I18Swift from './customization.i18n.swift.mdx';
import I18Web from './customization.i18n.web.mdx';
import LabelsAndroid from './customization.labels-and-text.android.mdx';
import LabelsFlutter from './customization.labels-and-text.flutter.mdx';
import LabelsReactNative from './customization.labels-and-text.react-native.mdx';
import LabelsSwift from './customization.labels-and-text.swift.mdx';
import LabelsWeb from './customization.labels-and-text.web.mdx';
import FieldsAndroid from './sign-up-fields.android.mdx';
import FieldsFlutter from './sign-up-fields.flutter.mdx';
import FieldsSwift from './sign-up-fields.swift.mdx';
import FieldsWeb from './sign-up-fields.web.mdx';
import ForceFlutter from './force-new-password-fields.flutter.mdx';
import ForceWeb from './force-new-password-fields.web.mdx';
import FormFlutter from './formfields/form-fields.flutter.mdx';
import FormReactNative from './formfields/form-fields.react-native.mdx';
import FormWeb from './formfields/form-fields.web.mdx';
import StylingAndroid from './customization.styling.android.mdx';
import StylingReactNative from './customization.styling.react-native.mdx';
import StylingSwift from './customization.styling.swift.mdx';
import StylingWeb from './customization.styling.web.mdx';
import FullAndroid from './customization.full-ui-customization.android.mdx';
import FullFlutter from './customization.full-ui-customization.flutter.mdx';
import FullSwift from './customization.full-ui-customization.swift.mdx';

export async function getStaticPaths() {
  return getCustomStaticPath(frontmatter.supportedFrameworks);
}

{/*  `getStaticProps` is required to prevent "Error: getStaticPaths was added without a getStaticProps. Without getStaticProps, getStaticPaths does nothing" */}

export async function getStaticProps() {
  return { props: {} }
}

<InlineFilter filters={['android']}>
  <CustomizationAndroid />
</InlineFilter>
<InlineFilter filters={['flutter']}>
  <CustomizationFlutter />
</InlineFilter>
<InlineFilter filters={['react-native']}>
  <CustomizationReactNative />

  <CustomizationOverrideReactNative />
</InlineFilter>
<InlineFilter filters={['swift']}>
  <CustomizationSwift />
</InlineFilter>
<InlineFilter filters={['angular', 'react', 'vue', 'svelte']}>
  <CustomizationWeb />

  <CustomizationOverrideWeb />
</InlineFilter>

## Internationalization (I18n)

<InlineFilter filters={['android']}>
  <I18Android />
</InlineFilter>
<InlineFilter filters={['flutter']}>
  <I18Flutter />
</InlineFilter>
<InlineFilter filters={['react-native']}>
  <I18ReactNative />
</InlineFilter>
<InlineFilter filters={['swift']}>
  <I18Swift />
</InlineFilter>
<InlineFilter filters={['angular', 'react', 'vue', 'svelte']}>
  <I18Web />
</InlineFilter>

## Labels & Text

<InlineFilter filters={['android']}>
  <LabelsAndroid />

  <FieldsAndroid />

  <StylingAndroid />

  <FullAndroid />
</InlineFilter>
<InlineFilter filters={['flutter']}>
  <LabelsFlutter />

  <FieldsFlutter />

  <ForceFlutter />

  <FormFlutter />

  <FullFlutter />
</InlineFilter>
<InlineFilter filters={['react-native']}>
  <LabelsReactNative />

  <FormReactNative />

  <StylingReactNative />
</InlineFilter>
<InlineFilter filters={['swift']}>
  <LabelsSwift />

  <FieldsSwift />

  <StylingSwift />

  <FullSwift />
</InlineFilter>
<InlineFilter filters={['angular', 'react', 'vue', 'svelte']}>
  <LabelsWeb />

  <FieldsWeb />

  <ForceWeb />

  <FormWeb />

  <StylingWeb />
</InlineFilter>
